<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>担保交友 - 筛选查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #60a5fa;
            --primary-dark: #1d4ed8;
            --secondary: #f97316;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-light: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --border-medium: #cbd5e1;
            --radius: 10px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: var(--shadow);
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        /* 搜索栏 */
        .search-container {
            padding: 12px 16px;
            background-color: var(--bg-white);
            position: sticky;
            top: 56px;
            z-index: 900;
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 30px;
            border: 1px solid var(--border-light);
            font-size: 0.9rem;
            background-color: var(--bg-light);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 0.95rem;
        }
        
        /* 筛选面板 */
        .filter-panel {
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            overflow: hidden;
        }
        
        /* 快捷筛选栏 */
        .quick-filter {
            display: flex;
            padding: 8px 16px;
            overflow-x: auto;
            scrollbar-width: none;
            border-bottom: 1px solid var(--border-light);
        }
        
        .quick-filter::-webkit-scrollbar {
            display: none;
        }
        
        .filter-item {
            padding: 6px 14px;
            margin-right: 8px;
            white-space: nowrap;
            border-radius: 20px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            background-color: var(--bg-light);
            border: none;
        }
        
        .filter-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 高级筛选区 */
        .advanced-filter {
            padding: 12px 16px;
        }
        
        .filter-section {
            margin-bottom: 16px;
        }
        
        .filter-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-collapse {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-option {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            background-color: var(--bg-white);
        }
        
        .filter-option.active {
            border-color: var(--primary);
            color: var(--primary);
            background-color: rgba(37, 99, 235, 0.1);
        }
        
        /* 范围筛选 */
        .range-slider {
            width: 100%;
            margin: 15px 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 筛选操作栏 */
        .filter-actions {
            display: flex;
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-top: 1px solid var(--border-light);
            position: sticky;
            bottom: 60px;
            z-index: 800;
        }
        
        .reset-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            background-color: var(--bg-light);
            border: 1px solid var(--border-light);
            margin-right: 10px;
        }
        
        .confirm-btn {
            flex: 2;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            color: white;
            background-color: var(--primary);
            border: none;
        }
        
        .filter-count {
            background-color: var(--primary-light);
            color: white;
            padding: 0 6px;
            border-radius: 10px;
            font-size: 0.75rem;
            margin-left: 5px;
        }
        
        /* 列表容器 */
        .list-container {
            padding: 8px 16px;
        }
        
        /* 交友卡片样式 */
        .friend-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: 1px solid var(--border-light);
        }
        
        .friend-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border-light);
        }
        
        .user-name {
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .user-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 2px;
        }
        
        .user-badges {
            display: flex;
            gap: 4px;
            margin-top: 3px;
        }
        
        .user-badge {
            font-size: 0.7rem;
            padding: 1px 6px;
            border-radius: 10px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
        }
        
        .user-badge.verified {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .user-badge.guaranteed {
            background-color: rgba(249, 115, 22, 0.1);
            color: var(--secondary);
        }
        
        .card-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }
        
        .distance {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .action-btn {
            font-size: 0.8rem;
            padding: 4px 10px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .primary-action {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        /* 内容区域 */
        .intro-text {
            font-size: 0.85rem;
            line-height: 1.5;
            color: var(--text-primary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .content-images {
            margin-top: 8px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
        }
        
        .content-image {
            width: 100%;
            height: 80px;
            border-radius: 6px;
            object-fit: cover;
        }
        
        /* 标签和底部信息 */
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 8px 0;
        }
        
        .card-tag {
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: var(--text-secondary);
            padding-top: 6px;
            border-top: 1px dashed var(--border-light);
        }
        
        .activity-meta {
            display: flex;
            gap: 12px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            gap: 4px;
            flex: 1;
            height: 100%;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 1.2rem;
        }
        
        /* 加载状态 */
        .load-more {
            padding: 15px 0;
            text-align: center;
            font-size: 0.9rem;
            color: var(--primary);
        }
        
        .loading {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(37, 99, 235, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 筛选面板动画 */
        .filter-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .filter-content.expanded {
            max-height: 500px;
            transition: max-height 0.5s ease-in;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">担保交友</div>
        <button class="nav-action">
            <i class="fas fa-sliders-h" id="filterToggle"></i>
        </button>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索感兴趣的人或标签...">
        </div>
    </div>
    
    <!-- 筛选面板 -->
    <div class="filter-panel" id="filterPanel">
        <!-- 快捷筛选栏 -->
        <div class="quick-filter">
            <button class="filter-item active">全部</button>
            <button class="filter-item">附近优先</button>
            <button class="filter-item">最新加入</button>
            <button class="filter-item">高信誉</button>
            <button class="filter-item">视频认证</button>
        </div>
        
        <!-- 高级筛选区 -->
        <div class="advanced-filter">
            <!-- 年龄筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <span>年龄范围</span>
                    <span class="filter-collapse" data-target="ageFilter">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </div>
                <div class="filter-content expanded" id="ageFilter">
                    <div class="filter-options">
                        <button class="filter-option">18-22岁</button>
                        <button class="filter-option active">23-30岁</button>
                        <button class="filter-option">31-40岁</button>
                        <button class="filter-option">41-50岁</button>
                        <button class="filter-option">50岁以上</button>
                    </div>
                </div>
            </div>
            
            <!-- 性别筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <span>性别</span>
                    <span class="filter-collapse" data-target="genderFilter">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </div>
                <div class="filter-content expanded" id="genderFilter">
                    <div class="filter-options">
                        <button class="filter-option active">不限</button>
                        <button class="filter-option">男</button>
                        <button class="filter-option">女</button>
                    </div>
                </div>
            </div>
            
            <!-- 距离筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <span>距离范围</span>
                    <span class="filter-collapse" data-target="distanceFilter">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </div>
                <div class="filter-content expanded" id="distanceFilter">
                    <input type="range" min="1" max="50" value="10" class="range-slider" id="distanceSlider">
                    <div class="range-labels">
                        <span>1km</span>
                        <span id="distanceValue">10km</span>
                        <span>50km</span>
                    </div>
                </div>
            </div>
            
            <!-- 兴趣爱好筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <span>兴趣爱好</span>
                    <span class="filter-collapse" data-target="interestFilter">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </div>
                <div class="filter-content expanded" id="interestFilter">
                    <div class="filter-options">
                        <button class="filter-option active">摄影</button>
                        <button class="filter-option">运动</button>
                        <button class="filter-option">美食</button>
                        <button class="filter-option">旅行</button>
                        <button class="filter-option">音乐</button>
                        <button class="filter-option">阅读</button>
                        <button class="filter-option">电影</button>
                        <button class="filter-option">游戏</button>
                        <button class="filter-option">宠物</button>
                        <button class="filter-option">更多</button>
                    </div>
                </div>
            </div>
            
            <!-- 学历筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <span>学历</span>
                    <span class="filter-collapse" data-target="educationFilter">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </div>
                <div class="filter-content" id="educationFilter">
                    <div class="filter-options">
                        <button class="filter-option active">不限</button>
                        <button class="filter-option">高中及以下</button>
                        <button class="filter-option">大专</button>
                        <button class="filter-option">本科</button>
                        <button class="filter-option">硕士</button>
                        <button class="filter-option">博士及以上</button>
                    </div>
                </div>
            </div>
            
            <!-- 职业筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <span>职业</span>
                    <span class="filter-collapse" data-target="careerFilter">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                </div>
                <div class="filter-content" id="careerFilter">
                    <div class="filter-options">
                        <button class="filter-option active">不限</button>
                        <button class="filter-option">学生</button>
                        <button class="filter-option">互联网</button>
                        <button class="filter-option">金融</button>
                        <button class="filter-option">教育</button>
                        <button class="filter-option">医疗</button>
                        <button class="filter-option">自由职业</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 筛选操作栏 -->
        <div class="filter-actions">
            <button class="reset-btn" id="resetFilter">重置</button>
            <button class="confirm-btn" id="applyFilter">
                应用筛选 <span class="filter-count">3</span>
            </button>
        </div>
    </div>
    
    <!-- 列表容器 -->
    <div class="list-container">
        <!-- 交友卡片1 - 多图 -->
        <div class="friend-card">
            <div class="card-header">
                <div class="user-info">
                    <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="user-avatar">
                    <div>
                        <div class="user-name">
                            林小雨 <i class="fas fa-female" style="color: #ec4899; font-size: 0.8rem;"></i>
                        </div>
                        <div class="user-meta">
                            <span>26岁</span>
                            <span>本科</span>
                            <span>设计师</span>
                        </div>
                        <div class="user-badges">
                            <span class="user-badge verified"><i class="fas fa-check"></i> 实名</span>
                            <span class="user-badge guaranteed"><i class="fas fa-shield-alt"></i> 担保</span>
                        </div>
                    </div>
                </div>
                <div class="card-actions">
                    <span class="distance">1.2km</span>
                    <button class="action-btn primary-action">
                        <i class="fas fa-comment-dots"></i> 聊聊
                    </button>
                </div>
            </div>
            
            <p class="intro-text">
                喜欢旅行、摄影和美食，周末经常去探店。希望认识真诚的朋友，一起探索城市的美好，非诚勿扰。
            </p>
            
            <div class="content-images">
                <img src="https://picsum.photos/id/112/300/300" alt="用户分享图片1" class="content-image">
                <img src="https://picsum.photos/id/119/300/300" alt="用户分享图片2" class="content-image">
                <img src="https://picsum.photos/id/133/300/300" alt="用户分享图片3" class="content-image">
            </div>
            
            <div class="card-tags">
                <span class="card-tag">旅行</span>
                <span class="card-tag">摄影</span>
                <span class="card-tag">美食</span>
            </div>
            
            <div class="card-footer">
                <div class="activity-meta">
                    <div class="meta-item">
                        <i class="far fa-clock"></i>
                        <span>1小时前</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-star"></i>
                        <span>4.9</span>
                    </div>
                </div>
                <div>
                    <i class="fas fa-eye"></i> 238
                </div>
            </div>
        </div>
        
        <!-- 交友卡片2 - 无图 -->
        <div class="friend-card">
            <div class="card-header">
                <div class="user-info">
                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="user-avatar">
                    <div>
                        <div class="user-name">
                            张明 <i class="fas fa-male" style="color: #3b82f6; font-size: 0.8rem;"></i>
                        </div>
                        <div class="user-meta">
                            <span>28岁</span>
                            <span>硕士</span>
                            <span>工程师</span>
                        </div>
                        <div class="user-badges">
                            <span class="user-badge verified"><i class="fas fa-check"></i> 实名</span>
                            <span class="user-badge guaranteed"><i class="fas fa-shield-alt"></i> 担保</span>
                            <span class="user-badge"><i class="fas fa-video"></i> 视频</span>
                        </div>
                    </div>
                </div>
                <div class="card-actions">
                    <span class="distance">3.5km</span>
                    <button class="action-btn primary-action">
                        <i class="fas fa-comment-dots"></i> 聊聊
                    </button>
                </div>
            </div>
            
            <p class="intro-text">
                热爱户外运动，特别是徒步和骑行。平时喜欢研究数码产品，周末可以一起去爬山或者参加科技展会。
            </p>
            
            <div class="card-tags">
                <span class="card-tag">户外</span>
                <span class="card-tag">骑行</span>
                <span class="card-tag">数码</span>
            </div>
            
            <div class="card-footer">
                <div class="activity-meta">
                    <div class="meta-item">
                        <i class="far fa-clock"></i>
                        <span>3小时前</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-star"></i>
                        <span>4.7</span>
                    </div>
                </div>
                <div>
                    <i class="fas fa-eye"></i> 156
                </div>
            </div>
        </div>
        
        <!-- 交友卡片3 - 单图 -->
        <div class="friend-card">
            <div class="card-header">
                <div class="user-info">
                    <img src="https://picsum.photos/id/54/100/100" alt="用户头像" class="user-avatar">
                    <div>
                        <div class="user-name">
                            赵阳 <i class="fas fa-male" style="color: #3b82f6; font-size: 0.8rem;"></i>
                        </div>
                        <div class="user-meta">
                            <span>27岁</span>
                            <span>本科</span>
                            <span>厨师</span>
                        </div>
                        <div class="user-badges">
                            <span class="user-badge verified"><i class="fas fa-check"></i> 实名</span>
                            <span class="user-badge guaranteed"><i class="fas fa-shield-alt"></i> 担保</span>
                        </div>
                    </div>
                </div>
                <div class="card-actions">
                    <span class="distance">0.8km</span>
                    <button class="action-btn primary-action">
                        <i class="fas fa-comment-dots"></i> 聊聊
                    </button>
                </div>
            </div>
            
            <p class="intro-text">
                西餐厨师，喜欢研究各种美食。周末会在家做料理，偶尔组织小型聚餐。寻找喜欢美食、愿意尝试新事物的朋友。
            </p>
            
            <div class="content-images">
                <img src="https://picsum.photos/id/431/300/300" alt="用户分享图片" class="content-image" style="grid-column: span 3; height: 180px;">
            </div>
            
            <div class="card-tags">
                <span class="card-tag">美食</span>
                <span class="card-tag">烹饪</span>
                <span class="card-tag">聚餐</span>
            </div>
            
            <div class="card-footer">
                <div class="activity-meta">
                    <div class="meta-item">
                        <i class="far fa-clock"></i>
                        <span>3天前</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-star"></i>
                        <span>4.9</span>
                    </div>
                </div>
                <div>
                    <i class="fas fa-eye"></i> 421
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more">
            <div class="loading">
                <div class="spinner"></div>
                <span>加载更多</span>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </div>
        <div class="nav-item active">
            <i class="fas fa-users nav-icon"></i>
            <span>交友</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-handshake nav-icon"></i>
            <span>担保</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-comment-alt nav-icon"></i>
            <span>消息</span>
        </div>
        <div class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选面板折叠/展开
        document.querySelectorAll('.filter-collapse').forEach(toggle => {
            toggle.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetContent = document.getElementById(targetId);
                const icon = this.querySelector('i');
                
                targetContent.classList.toggle('expanded');
                
                if (targetContent.classList.contains('expanded')) {
                    icon.classList.remove('fa-chevron-right');
                    icon.classList.add('fa-chevron-down');
                } else {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-right');
                }
            });
        });
        
        // 距离滑块
        const distanceSlider = document.getElementById('distanceSlider');
        const distanceValue = document.getElementById('distanceValue');
        
        distanceSlider.addEventListener('input', function() {
            distanceValue.textContent = `${this.value}km`;
            updateFilterCount();
        });
        
        // 筛选选项点击
        document.querySelectorAll('.filter-option, .filter-item').forEach(option => {
            option.addEventListener('click', function() {
                // 判断是否是单选组
                const isSingleSelect = this.parentElement.parentElement.id === 'genderFilter' ||
                                     this.parentElement.parentElement.id === 'educationFilter' ||
                                     this.parentElement.parentElement.id === 'careerFilter' ||
                                     this.parentElement.classList.contains('quick-filter');
                
                if (isSingleSelect) {
                    // 单选逻辑
                    this.parentElement.querySelectorAll('.filter-option, .filter-item').forEach(opt => {
                        opt.classList.remove('active');
                    });
                }
                
                this.classList.toggle('active');
                updateFilterCount();
            });
        });
        
        // 更新筛选数量
        function updateFilterCount() {
            const activeFilters = document.querySelectorAll('.filter-option.active, .filter-item.active:not(:first-child)').length;
            const distanceChanged = distanceSlider.value !== '10';
            
            let totalCount = activeFilters;
            if (distanceChanged) totalCount++;
            
            document.querySelector('.filter-count').textContent = totalCount;
        }
        
        // 重置筛选
        document.getElementById('resetFilter').addEventListener('click', function() {
            // 重置选项
            document.querySelectorAll('.filter-option, .filter-item').forEach(option => {
                option.classList.remove('active');
            });
            
            // 激活默认选项
            document.querySelector('.filter-item:first-child').classList.add('active');
            document.querySelector('#ageFilter .filter-option:nth-child(2)').classList.add('active');
            document.querySelector('#genderFilter .filter-option:first-child').classList.add('active');
            document.querySelector('#interestFilter .filter-option:first-child').classList.add('active');
            document.querySelector('#educationFilter .filter-option:first-child').classList.add('active');
            document.querySelector('#careerFilter .filter-option:first-child').classList.add('active');
            
            // 重置滑块
            distanceSlider.value = 10;
            distanceValue.textContent = '10km';
            
            // 更新计数
            updateFilterCount();
            
            // 显示提示
            showToast('已重置筛选条件');
        });
        
        // 应用筛选
        document.getElementById('applyFilter').addEventListener('click', function() {
            // 收集筛选条件
            const activeFilters = [];
            
            document.querySelectorAll('.filter-option.active').forEach(option => {
                activeFilters.push(option.textContent);
            });
            
            document.querySelectorAll('.filter-item.active:not(:first-child)').forEach(item => {
                activeFilters.push(item.textContent);
            });
            
            if (distanceSlider.value !== '10') {
                activeFilters.push(`距离: ${distanceSlider.value}km以内`);
            }
            
            // 显示筛选结果提示
            showToast(`已应用 ${activeFilters.length} 个筛选条件`);
            
            // 模拟筛选加载
            const loadMore = document.querySelector('.load-more .loading');
            loadMore.innerHTML = '<div class="spinner"></div><span>筛选中...</span>';
            
            setTimeout(() => {
                loadMore.innerHTML = '<div class="spinner"></div><span>加载更多</span>';
                // 实际应用中这里会根据筛选条件重新加载列表数据
            }, 1000);
        });
        
        // 筛选面板切换显示
        let filterVisible = true;
        document.getElementById('filterToggle').addEventListener('click', function() {
            const filterPanel = document.getElementById('filterPanel');
            
            if (filterVisible) {
                filterPanel.style.maxHeight = '0';
                filterPanel.style.overflow = 'hidden';
                this.innerHTML = '<i class="fas fa-filter"></i>';
            } else {
                filterPanel.style.maxHeight = '1000px';
                filterPanel.style.overflow = 'visible';
                this.innerHTML = '<i class="fas fa-sliders-h"></i>';
            }
            
            filterVisible = !filterVisible;
        });
        
        // 搜索功能
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchText = this.value.trim();
                if (searchText) {
                    showToast(`搜索: ${searchText}`);
                    
                    // 模拟搜索加载
                    const loadMore = document.querySelector('.load-more .loading');
                    loadMore.innerHTML = '<div class="spinner"></div><span>搜索中...</span>';
                    
                    setTimeout(() => {
                        loadMore.innerHTML = '<div class="spinner"></div><span>加载更多</span>';
                    }, 1000);
                }
            }
        });
        
        // 聊聊按钮点击
        document.querySelectorAll('.primary-action').forEach(btn => {
            btn.addEventListener('click', function() {
                const userName = this.closest('.friend-card').querySelector('.user-name').textContent.trim();
                showToast(`开始与 ${userName} 聊天`);
            });
        });
        
        // 底部导航切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 提示消息
        function showToast(message) {
            // 创建提示元素
            const toast = document.createElement('div');
            toast.style.position = 'fixed';
            toast.style.bottom = '80px';
            toast.style.left = '50%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '8px 16px';
            toast.style.borderRadius = '4px';
            toast.style.zIndex = '9999';
            toast.style.fontSize = '0.85rem';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s ease';
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            // 显示提示
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            // 隐藏提示
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html>
